<!--
 * @Author: YSM
 * @Description: 
 * @Date: 2022-08-29 17:38:10
 * @LastEditTime: 2022-08-29 17:39:54
 * @FilePath: \my_vue_demof:\杂物箱\技术\my_web_knowledge\html\flex布局.html
-->
<!-- flex布局，左右两栏设置固定大小，中间一栏设置为flex:1。 -->
<html>
  <head>
    <title>flex布局</title>
    <style type="text/css">
      #main {
        position: relative;
        height: 100px;
      }

      #left {
        position: absolute;
        width: 100px;
        height: 100px;
        background: tomato;
      }

      #right {
        position: absolute;
        top: 0;
        right: 0;
        width: 200px;
        height: 100px;
        background: gold;
      }

      #center {
        margin-left: 100px;
        margin-right: 200px;
        height: 100px;
        background: lightgreen;
      }
    </style>
  </head>
  <body>
    <div id="main" class="col">
      <div id="left" class="col">this is left</div>
      <div id="center">this is main</div>
      <div id="right" class="col">this is right</div>
    </div>
  </body>
</html>